<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
        <text class="fa fa-chevron-left fa-gray"></text>
      </view>
      <text class="nav-title">辅助检查结果解读图谱</text>
      <view class="nav-right" @tap="showMenu">
        <text>⋯</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 图集头部信息 -->
      <view class="gallery-header">
        <view class="header-card">
          <view class="header-icon">
            <text class="fa fa-image fa-med"></text>
          </view>
          <view class="header-info">
            <text class="header-title">辅助检查结果解读图谱</text>
            <view class="header-meta">
              <text class="meta-item"
                ><text class="fa fa-image" style="margin-right: 8rpx"></text
                >图文内容</text
              >
              <text class="meta-item"
                ><text class="fa fa-clock-o" style="margin-right: 8rpx"></text>
                预计浏览 8分钟</text
              >
            </view>
            <view class="progress-wrapper">
              <view class="progress-bar">
                <view class="progress-fill" style="width: 40%"></view>
              </view>
              <text class="progress-text">40%</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 图文展示内容 -->
      <view class="gallery-content">
        <view class="content-card">
          <view class="card-header">
            <text class="card-title">X光片解读要点</text>
          </view>

          <!-- 主图片 -->
          <view class="main-image-wrapper">
            <image
              class="main-image"
              src="https://images.unsplash.com/photo-1559757148-5c350d0d3c56?q=80&w=800&auto=format&fit=crop"
              mode="aspectFill"
              @tap="previewImage"
            />
            <view class="image-overlay" @tap="previewImage">
              <text class="fa fa-search-plus"></text>
            </view>
          </view>

          <!-- 图片说明 -->
          <view class="image-description">
            <text class="desc-title">正常胸部X光片特征</text>
            <text class="desc-content">
              正常胸部X光片显示清晰的肺野、心影轮廓和膈肌。肺野应呈均匀的灰色，无异常阴影或密度增高区域。心影大小正常，心胸比例小于0.5。
            </text>

            <!-- 观察要点 -->
            <view class="key-points">
              <view class="points-header">
                <text class="points-icon">🔎</text>
                <text class="points-title">观察要点：</text>
              </view>
              <view class="points-list">
                <text class="point-item">• 肺野透亮度是否均匀</text>
                <text class="point-item">• 心影轮廓是否清晰</text>
                <text class="point-item">• 膈肌位置是否正常</text>
                <text class="point-item">• 肋骨结构是否完整</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="bottom-spacer"></view>
    </scroll-view>

    <!-- 浮动计时器 -->
    <view class="floating-timer">
      <text class="timer-icon">⏱️</text>
      <text class="timer-text">{{ timer }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      timer: "03:28",
      timerInterval: null,
      seconds: 208, // 3分28秒
      imageUrl:
        "https://images.unsplash.com/photo-1559757148-5c350d0d3c56?q=80&w=800&auto=format&fit=crop",
    };
  },
  onLoad() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
    this.startTimer();
  },
  onUnload() {
    if (this.timerInterval) {
      clearInterval(this.timerInterval);
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    showMenu() {
      uni.showActionSheet({
        itemList: ["保存图片", "分享", "收藏"],
        success: (res) => {
          console.log("选择了第" + (res.tapIndex + 1) + "个按钮");
        },
      });
    },
    startTimer() {
      this.timerInterval = setInterval(() => {
        this.seconds++;
        const minutes = Math.floor(this.seconds / 60);
        const secs = this.seconds % 60;
        this.timer = `${String(minutes).padStart(2, "0")}:${String(
          secs
        ).padStart(2, "0")}`;
      }, 1000);
    },
    previewImage() {
      uni.previewImage({
        urls: [this.imageUrl],
        current: 0,
      });
    },
    goToHome() {
      uni.navigateTo({
        url: "/pages/home",
      });
    },
    goToProfile() {
      uni.navigateTo({
        url: "/pages/profile",
      });
    },
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
  display: flex;
  flex-direction: column;
}

/* 导航栏 */
.nav-bar {
  height: 88rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 32rpx;
}

.nav-left {
  position: absolute;
  left: 32rpx;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
  text-align: center;
}

.nav-right {
  position: absolute;
  right: 32rpx;
  font-size: 40rpx;
  color: #6b7280;
}

/* 内容区域 */
.content {
  flex: 1;
  padding-bottom: 120rpx;
}

/* 图集头部 */
.gallery-header {
  padding: 32rpx;
}

.header-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f3f4f6;
  display: flex;
  gap: 24rpx;
}

.header-icon {
  width: 96rpx;
  height: 96rpx;
  background: #f3e8ff;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  flex-shrink: 0;
}

.header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.header-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
}

.header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24rpx;
}

.meta-item {
  font-size: 24rpx;
  color: #6b7280;
}

.progress-wrapper {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.progress-bar {
  flex: 1;
  height: 12rpx;
  background: #e5e7eb;
  border-radius: 999rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, #a855f7, #6366f1);
  border-radius: 999rpx;
}

.progress-text {
  font-size: 24rpx;
  font-weight: 500;
  color: #4b5563;
}

/* 图文内容 */
.gallery-content {
  padding: 0 32rpx;
}

.content-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f3f4f6;
}

.card-header {
  margin-bottom: 32rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
}

/* 主图片 */
.main-image-wrapper {
  position: relative;
  width: 100%;
  height: 512rpx;
  border-radius: 24rpx;
  overflow: hidden;
  margin-bottom: 32rpx;
}

.main-image {
  width: 100%;
  height: 100%;
  background: #f3f4f6;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.image-overlay:active {
  background: rgba(0, 0, 0, 0.1);
}

.overlay-icon {
  font-size: 64rpx;
  opacity: 0;
  transition: all 0.3s;
}

.image-overlay:active .overlay-icon {
  opacity: 0.8;
}

/* 图片说明 */
.image-description {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.desc-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #111827;
  display: block;
}

.desc-content {
  font-size: 28rpx;
  color: #374151;
  line-height: 1.6;
  display: block;
}

/* 观察要点 */
.key-points {
  background: #f5f3ff;
  border-left: 8rpx solid #a855f7;
  border-radius: 0 16rpx 16rpx 0;
  padding: 24rpx;
}

.points-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 16rpx;
}

.points-icon {
  font-size: 28rpx;
}

.points-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #7c3aed;
}

.points-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.point-item {
  font-size: 28rpx;
  color: #7c3aed;
  line-height: 1.5;
  display: block;
}

/* 浮动计时器 */
.floating-timer {
  position: fixed;
  top: 160rpx;
  right: 32rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border: 1rpx solid #e5e7eb;
  border-radius: 24rpx;
  padding: 16rpx 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 12rpx;
  z-index: 100;
}

.timer-icon {
  font-size: 28rpx;
  color: #a855f7;
}

.timer-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}

/* 底部留白 */
.bottom-spacer {
  height: 48rpx;
}

/* 底部导航 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid #f3f4f6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  color: #6b7280;
}

.tab-item-active {
  color: #2563eb;
}

.tab-icon {
  font-size: 36rpx;
}

.tab-label {
  font-size: 20rpx;
}

.tab-item-active .tab-label {
  font-weight: 500;
}
.fa-image {
  color: rgb(147 51 234);
}
</style>
